<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-row type="flex" justify="space-between" style="margin: 0 0 10px 0 ">
          <a-col>
            <a-button type="primary" style="margin-right: 30px" @click="showModal(false,-1)">新增</a-button>
            <a-button type="danger" @click="batchDelete">删除</a-button>
          </a-col>
          <a-col>
            <a-row type="flex">
              <a-col style="margin-right: 10px">
                <a-input v-model="value" placeholder="请输入关键字"></a-input>
              </a-col>
              <a-col>
                <a-config-provider :auto-insert-space-in-button="false">
                  <a-button type="primary" @click="toSearch">查找</a-button>
                </a-config-provider>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </div>
      <!-- table -->
      <a-table 
      :scroll="{ x: 1500}"
      :rowKey="(record) => record.id"
      :row-selection="rowSelection" 
      :columns="columns" 
      :data-source="listData" bordered 
      :pagination="pagination">
        <!-- <div slot="Date" slot-scope="text">{{ text }}</div> -->
        <div slot="edit" slot-scope="text,item">
          <a class="mr-10" @click="showModal(item,3)">编辑</a>
          <a @click="seeContent(item)">查看</a>
        </div>
      </a-table>
    </a-card>
    <!-- model -->
    <a-modal v-model="visible" :title="title" @cancel="cancel" ok-text="提交" @ok="submitForm(form)" :width="800">
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="公告名称:" prop="title">
          <a-input v-model="form.title" />
        </a-form-model-item>
        <a-form-model-item label="来源:" prop="source">
          <a-input v-model="form.source" />
        </a-form-model-item>
        <a-form-model-item label="内容:" prop="content">
            <editor-bar v-model="form.content"> </editor-bar>
          <!-- <a-textarea v-model="form.content" :auto-size="{ minRows: 5, maxRows: 100 }" /> -->
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <!-- 查看 -->
    <a-modal v-model="LookVisible" title="查看公告" :width="800">
      <template slot="footer">
        <a-button key="back" @click="cancelLook">关闭</a-button>
      </template>
      <a-form-model :model="LookForm" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="公告名称:" prop="title">
          <a-input v-model="LookForm.title" disabled />
        </a-form-model-item>
        <a-form-model-item label="来源:" prop="source">
          <a-input v-model="LookForm.source" disabled />
        </a-form-model-item>
        <a-form-model-item label="内容:" prop="content">
            <editor-bar  v-model="LookForm.content"> </editor-bar>

          <!-- <a-textarea v-model="LookForm.content" :auto-size="{ minRows: 5, maxRows: 100 }" /> -->
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import {
  ActivityManageList,
  AddActivityManage,
  DeleteActivityManage,
  GetObjActivityManage,
  UpdateActivityManage,
} from '@/api/ActivityManage'
import EditorBar from "@/components/Editor/WangEditor.vue";
export default {
  data() {
    return {
      selectedRowKeys: [], //列表选择key集合
      delIds: [], //删除id
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      rules: {
        title: [{ required: true, message: '请输入公告名称', trigger: 'blur' }],
        source: [{ required: true, message: '请输入来源', trigger: 'blur' }],
        content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
      },
      pagination: {
        current: 1,
        total: 0,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        showTotal: (total) => `共有 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize),
        onChange: (page, pageSize) => this.onPageChange(page, pageSize),
      },
      index: 0,
      LookVisible:false,
      visible: false,
      value: '',
      value2: '',
      form: {
        title: '',
        content: '',
        source: '',
      },
      LookForm:{
        title: '',
        content: '',
        source: '',
      },
      Editform: {},
      columns: [
        {
          title: '公告名称',
          dataIndex: 'title',
          // align: 'center',
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          key: 'Date',
          align: 'center',
          scopedSlots: { customRender: 'Date' },
          // sorter: (a, b) => {
          //   //将日期转成毫秒数，有利于计算大小
          //   let atime = new Date(a.createTime.replace(/-/g, '/')).getTime()
          //   let btime = new Date(b.createTime.replace(/-/g, '/')).getTime()
          //   return atime - btime
          // },
          //两个排序方向
          sortDirections: ['descend', 'ascend'],
          //默认排序
          defaultSortOrder: 'descend',
        },
        {
          title: '创建人',
          dataIndex: 'createOperator',
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'edit',
          align: 'center',
          width:150,
          fixed: 'right',
          scopedSlots: { customRender: 'edit' },
        },
      ],
      listData: [],
    }
  },
  created() {
    this.toGetActivityManageList()
  },
  components: { EditorBar },

  methods: {
    //获取供需活动分页列表
    toGetActivityManageList() {
      let params = {
        keyword: this.value,
        size: this.pagination.pageSize,
        current: this.pagination.current,
        ...this.form,
      }
      ActivityManageList(params).then((res) => {
        if (res.code == 200) {
          this.listData = res.data.records;
          this.pagination.total=res.data.total;
        }
      })
    },
    // 分页
    onPageChange(page, pageSize) {
      this.pagination.current = page
      this.toGetActivityManageList()
    },
    onSizeChange(current, pageSize) {
      this.pagination.pageSize = pageSize
      this.pagination.current = current
      this.toGetActivityManageList()
    },
    // 多项选择
    // onSelectChange(value, selectedRowKeys) {
    //   if (selectedRowKeys.length > 1) {
    //     this.deleteIds = selectedRowKeys.map((item) => item.id).join(',') //删除或批量删除的Id
    //   } else {
    //     this.deleteIds = selectedRowKeys.map((item) => item.id)
    //   }
    // },

    onSelectChange(value, selectedRowKeys) {
      console.log(selectedRowKeys)
      // this.selectedRowKeys = selectedRowKeys
      this.delIds = selectedRowKeys.map((x) => x.id)
      console.log(this.delIds)
    },
    // 删除/批量删除
    batchDelete() {
      let _this = this
      if (_this.delIds.length <= 0) {
        _this.$message.error('请选择要删除的选项')
      } else {
        _this.$confirm({
          title: '您确定要删除此选项吗?',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            // 点击确定
            DeleteActivityManage(_this.delIds.join(',')).then((res) => {
              if (res.code == 200) {
                _this.$message.success('删除成功')
                _this.toGetActivityManageList()
                _this.delIds = []
                _this.selectedRowKeys = [] //删除成功清空选择
                if (_this.listData.length == 1) {
                  // 如果只有最后一条就刷新上一页
                  _this.pagination.current--
                } else if (_this.pagination.current < 1) {
                  _this.pagination.current = 1
                }
              }
            })
          },
          onCancel() {
            // 点击取消
            for(let item in this.form){
              this.form[item] = ''
            }
          },
        })
      }
    },

    // 新增/编辑
    showModal(item, index) {
      if (Number(index) > 0) {
        // 编辑
        this.form = { ...item }
        this.index = index
      } else {
        // 新增
        this.index = index
      }
      this.visible = true
    },
    // 查看
    seeContent(item){      
      GetObjActivityManage(item.id).then(res => {
        if(res.code == 200){
          this.LookVisible = true
          this.LookForm = res.data
        }
      })
    },
    cancelLook(item){
      this.LookVisible = false;
      for(let item in this.LookForm){
        this.LookForm[item] = ''
      }
    },
    // 确定新增/编辑
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // 新增
          if (this.index == -1) {
            let params = { ...this.form }
            AddActivityManage(params).then((res) => {
              if (res.code == 200) {
                this.$message.success('新增成功！')
                this.form.title = ''
                this.form.content = ''
                this.form.source = ''
                this.visible = false
                this.toGetActivityManageList()
              }
            })
          }
          // 编辑
          else if (this.index > 0) {
            let params = {
              content:this.form.content,
              source: this.form.source,
              title: this.form.title,
              id: this.form.id
            }
            UpdateActivityManage(params).then((res) => {
              if (res.code == 200) {
                this.visible = false
                this.$message.success('编辑成功！')
                this.toGetActivityManageList()
              }
            })
            for (let item in this.form) {
              this.form[item] = ''
            }
          }
        }
      })
    },
    // 搜索
    toSearch() {
      this.pagination.current =1
      this.toGetActivityManageList()
    },
    // 取消新增/编辑
    cancel() {
      for (let item in this.form) {
        this.form[item] = ''
      }
    },
  },
  computed: {
    title() {
      return this.index > 0 ? '编辑公告' : '新增公告'
    },
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
          this.selectedRowKeys = selectedRowKeys
          this.delIds = selectedRows.map((x) => x.id)
        },
        selectedRowKeys: this.selectedRowKeys,
      }
    },
  },
}
</script>

<style lang="less" scoped>
.space {
  margin: 40px 0;
}
/deep/.w-e-text {
  min-height: 300px;

  max-height: 300px;
}
</style>
